<template>
  <div class="constitution-features" style="height: 100%; overflow: hidden;">
    <h3 style="margin-bottom: 15px; color: #32ccee; margin: auto;
    background: linear-gradient(45deg, #f8e8ba, #d09d54); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">{{ constitution }}的特征</h3>
    <div class="chart-container" style="height: 40%;">
      <div ref="radarChart" class="radar-chart" style="height: 100%; width: 100%; "></div>
    </div>
    <div class="features-description" style="height: 50%; overflow-y: auto; padding: 10px;">
      <div class="feature-list" style="display: grid; gap: 5px;">
        <div v-for="(feature, index) in constitutionData[constitution].features" 
             :key="index" 
             class="feature-item" 
             style="display: flex; align-items : center; gap: 10px; color: #fff; padding: 8px; border-radius: 6px; background: rgba(50, 204, 238, 0.1);">
          <i :class="feature.icon" style="color: #32ccee;"></i>
          <span>{{ feature.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  constitution: {
    type: String,
    required: true,
    validator: (value) => [
      '平和质',
      '气虚质',
      '阳虚质',
      '阴虚质',
      '痰湿质',
      '湿热质',
      '血瘀质',
      '气郁质',
      '特禀质'
    ].includes(value)
  }
});

const radarChart = ref(null);
let chart = null;

const constitutionData = {
  '平和质': {
    radarData: [
      { name: '性格特征', value: 90 },
      { name: '生理特征', value: 85 },
      { name: '抵抗力', value: 95 },
      { name: '适应能力', value: 90 },
      { name: '发病倾向', value: 20 }
    ],
    features: [
      { icon: 'fa fa-smile-o', text: '性格开朗、乐观' },
      { icon: 'fa fa-heart', text: '气血调和、体形匀称' },
      { icon: 'fa fa-shield', text: '抵抗力强、不易生病' },
      { icon: 'fa fa-balance-scale', text: '适应能力强' }
    ]
  },
  '气虚质': {
    radarData: [
      { name: '性格特征', value: 60 },
      { name: '生理特征', value: 50 },
      { name: '抵抗力', value: 45 },
      { name: '适应能力', value: 55 },
      { name: '发病倾向', value: 70 }
    ],
    features: [
      { icon: 'fa fa-bed', text: '容易疲劳、精神不振' },
      { icon: 'fa fa-volume-down', text: '声音低弱、气短懒言' },
      { icon: 'fa fa-thermometer-quarter', text: '易感冒、抵抗力差' },
      { icon: 'fa fa-tint', text: '易出汗、活动量差' }
    ]
  },
  '阳虚质': {
    radarData: [
      { name: '性格特征', value: 55 },
      { name: '生理特征', value: 45 },
      { name: '抵抗力', value: 40 },
      { name: '适应能力', value: 50 },
      { name: '发病倾向', value: 75 }
    ],
    features: [
      { icon: 'fa fa-thermometer-empty', text: '畏寒怕冷、手脚凉' },
      { icon: 'fa fa-moon-o', text: '精神不振、喜静' },
      { icon: 'fa fa-tint', text: '面色偏白、尿量多' },
      { icon: 'fa fa-snowflake-o', text: '耐寒能力差' }
    ]
  },
  '阴虚质': {
    radarData: [
      { name: '性格特征', value: 65 },
      { name: '生理特征', value: 55 },
      { name: '抵抗力', value: 50 },
      { name: '适应能力', value: 60 },
      { name: '发病倾向', value: 70 }
    ],
    features: [
      { icon: 'fa fa-fire', text: '手足心热、口燥咽干' },
      { icon: 'fa fa-bolt', text: '性格急躁、容易上火' },
      { icon: 'fa fa-sun-o', text: '不耐热、易烦躁' },
      { icon: 'fa fa-thermometer-full', text: '体型偏瘦、五心烦热' }
    ]
  },
  '痰湿质': {
    radarData: [
      { name: '性格特征', value: 50 },
      { name: '生理特征', value: 45 },
      { name: '抵抗力', value: 55 },
      { name: '适应能力', value: 45 },
      { name: '发病倾向', value: 80 }
    ],
    features: [
      { icon: 'fa fa-cloud', text: '体形肥胖、腹部松软' },
      { icon: 'fa fa-clock-o', text: '睡眠时间长、反应迟钝' },
      { icon: 'fa fa-tint', text: '痰多、口粘腻' },
      { icon: 'fa fa-umbrella', text: '不耐受潮湿环境' }
    ]
  },
  '湿热质': {
    radarData: [
      { name: '性格特征', value: 60 },
      { name: '生理特征', value: 50 },
      { name: '抵抗力', value: 55 },
      { name: '适应能力', value: 45 },
      { name: '发病倾向', value: 75 }
    ],
    features: [
      { icon: 'fa fa-thermometer-full', text: '面垢油光、容易长痘' },
      { icon: 'fa fa-fire', text: '口苦、口臭、易上火' },
      { icon: 'fa fa-cloud', text: '身重困倦、大便粘滞' },
      { icon: 'fa fa-tint', text: '易出汗、皮肤油腻' }
    ]
  },
  '血瘀质': {
    radarData: [
      { name: '性格特征', value: 55 },
      { name: '生理特征', value: 50 },
      { name: '抵抗力', value: 60 },
      { name: '适应能力', value: 50 },
      { name: '发病倾向', value: 75 }
    ],
    features: [
      { icon: 'fa fa-user', text: '肤色晦暗、唇色偏暗' },
      { icon: 'fa fa-eye', text: '眼睛干涩、记忆力下降' },
      { icon: 'fa fa-heart', text: '容易瘀斑、经期不调' },
      { icon: 'fa fa-thermometer-half', text: '怕冷、手脚发凉' }
    ]
  },
  '气郁质': {
    radarData: [
      { name: '性格特征', value: 40 },
      { name: '生理特征', value: 55 },
      { name: '抵抗力', value: 50 },
      { name: '适应能力', value: 45 },
      { name: '发病倾向', value: 80 }
    ],
    features: [
      { icon: 'fa fa-frown-o', text: '忧郁、敏感多虑' },
      { icon: 'fa fa-meh-o', text: '情绪波动大、易焦虑' },
      { icon: 'fa fa-bed', text: '胸闷、失眠多梦' },
      { icon: 'fa fa-user-times', text: '人际关系欠佳' }
    ]
  },
  '特禀质': {
    radarData: [
      { name: '性格特征', value: 50 },
      { name: '生理特征', value: 45 },
      { name: '抵抗力', value: 40 },
      { name: '适应能力', value: 45 },
      { name: '发病倾向', value: 85 }
    ],
    features: [
      { icon: 'fa fa-exclamation-triangle', text: '过敏体质、遗传倾向' },
      { icon: 'fa fa-shield', text: '免疫力低下' },
      { icon: 'fa fa-leaf', text: '对特定物质过敏' },
      { icon: 'fa fa-medkit', text: '易患特定疾病' }
    ]
  }
};

const initChart = () => {
  if (!radarChart.value) return;
  
  chart = echarts.init(radarChart.value);
  const data = constitutionData[props.constitution].radarData;
  
  const option = {
    backgroundColor: 'transparent',
    grid: {
      top: '5%',
      bottom: '5%'
    },
    radar: {
      center: ['50%', '50%'],
      radius: '65%',
      indicator: [
        { name: '性格特征', max: 100 },
        { name: '生理特征', max: 100 },
        { name: '抵抗力', max: 100 },
        { name: '适应能力', max: 100 },
        { name: '发病倾向', max: 100 }
      ],
      shape: 'circle',
      splitNumber: 4,
      axisName: {
        color: '#f8e8ba'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(50, 204, 238, 0.3)'
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(50, 204, 238, 0.05)', 'rgba(50, 204, 238, 0.1)']
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(50, 204, 238, 0.3)'
        }
      }
    },
    series: [{
      name: props.constitution,
      type: 'radar',
      data: [{
        value: data.map(item => item.value),
        name: props.constitution,
        areaStyle: {
          color: 'rgba(50, 204, 238, 0.3)'
        },
        lineStyle: {
          color: '#32ccee'
        },
        itemStyle: {
          color: '#32ccee'
        }
      }]
    }]
  };
  
  chart.setOption(option);
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', () => {
    chart && chart.resize();
  });
});

watch(() => props.constitution, () => {
  initChart();
});
</script>

<style scoped>
.constitution-features {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  color: #fff;
  background-color: transparent;
}

.chart-container {
  flex: 1;
  min-height: 200px;
}

.radar-chart {
  width: 100%;
  height: 100%;
}

.features-description {
  margin-top: 20px;
}

.features-description h3 {
  color: #32ccee;
  margin-bottom: 15px;
  text-align: center;
  font-size: 18px;
  
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(50, 204, 238, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: rgba(50, 204, 238, 0.2);
  transform: translateY(-2px);
}

.feature-item i {
  color: #32ccee;
  font-size: 18px;
}

.feature-item span {
  font-size: 14px;
}
</style>